<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    getUser() {
      let auth = JSON.parse(localStorage.getItem("auth"));
      if (auth) this.user = auth.user;
    },
    logout() {
      localStorage.removeItem("auth");
      this.$router.replace("/login");
    }
  },
  mounted() {
    this.getUser();
  }
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20" align="middle">
          <el-col :span="1"><img src="@/assets/logo.svg" alt="logo" /></el-col>
          <el-col :span="16"><h2>学生信息管理系统</h2></el-col>
          <el-col :span="6">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon><i-ep-user-filled /></el-icon>
                <span>{{ user.username }}</span>
                <el-icon class="el-icon--right">
                  <i-ep-arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>Action 1</el-dropdown-item>
                  <el-dropdown-item>Action 2</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#ffd04b"
            background-color="#545c64"
            text-color="#fff"
            default-active="1"
            :default-openeds="['1', '2']"
            router>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><i-ep-coin /></el-icon>
                <span>基础数据</span>
              </template>
              <el-menu-item index="/manager/classes">
                <template #title>
                  <el-icon><i-ep-school /></el-icon>
                  <span>班级管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/manager/student">
                <template #title>
                  <el-icon><i-ep-menu /></el-icon>
                  <span>学生管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/manager/course">
                <template #title>
                  <el-icon><i-ep-document /></el-icon>
                  <span>课程管理</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><i-ep-coin /></el-icon>
                <span>成绩管理</span>
              </template>
              <el-menu-item index="/manager/score">
                <template #title>
                  <el-icon><i-ep-histogram /></el-icon>
                  <span>成绩录入</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/manager/score-query">
                <template #title>
                  <el-icon><i-ep-search /></el-icon>
                  <span>成绩查询</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  background-color: #545c64;
}

.el-row {
  height: var(--el-header-height);
}

.el-col {
  align-items: center;
}

img {
  width: 48px;
  display: inline-block;
}

h2 {
  color: whitesmoke;
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
}

.el-menu-vertical-demo {
  min-height: calc(100vh - 60px);
}
</style>
